<template>
  <div class="page flex-col">
    <div class="bd1 flex-col">
      <div class="section1 flex-col">
        <div class="section2 flex-row">
          <div class="outer1 flex-col">
            <div class="layer1 flex-row">
              <img
                class="label1"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/dds/ddsList/ss.png"
              />
              <span class="txt1">投保人姓名/工单号/保单号</span>
            </div>
          </div>
          <div class="outer2 flex-col"><span class="txt2">筛选</span></div>
        </div>
      </div>
      <div class="section3 flex-col">
        <div class="section4 flex-row">
          <div class="outer3 flex-col">
            <div class="layer2 flex-col">
              <span class="word1">工单处理</span>
              <div class="mod1 flex-col"></div>
            </div>
          </div>
          <div class="outer4 flex-col"><span class="info1">历史工单</span></div>
        </div>
        <div class="section5 flex-col"></div>
      </div>
      <div class="section6 flex-col">
        <div class="layer3 flex-col">
          <div class="outer5 flex-row">
            <div class="outer6 flex-col">
              <div class="main1 flex-row">
                <span class="txt3">待处理(单）</span>
                <span class="txt4">1</span>
              </div>
            </div>
            <div class="outer7 flex-col"></div>
            <div class="outer8 flex-col"></div>
            <div class="outer9 flex-col"></div>
            <div class="outer10 flex-col">
              <div class="bd2 flex-row">
                <span class="txt5">处理中(单）</span>
                <span class="txt6">2</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section7 flex-col">
        <div class="section8 flex-col">
          <div
            class="mod2-0 flex-col"
            v-for="(item, index) in loopData0"
            :key="index"
          >
            <div class="main2-0 flex-row">
              <span class="word2-0" v-html="item.lanhutext0"></span>
              <span
                class="word3-0"
                :style="{ color: item.lanhufontColor1 }"
                v-html="item.lanhutext1"
              ></span>
            </div>
          </div>
        </div>
        <div class="section9 flex-col"></div>
        <div class="section10 flex-col">
          <div class="block1 flex-row">
            <span class="txt7">Z202007161426430000001</span>
            <img class="section11 flex-col" src="../../assets/imgs/dds/ddsList/jj.png" alt="">
            <span class="word4">待处理</span>
          </div>
        </div>
        <div class="section12 flex-col">
          <div class="main3 flex-col">
            <div class="main4 flex-row">
              <span class="word6">下发原因</span>
              <span class="word7">续期问题件</span>
              <div class="section13 flex-col"></div>
              <span class="txt8">实收回退</span>
            </div>
          </div>
        </div>
        <img
          class="pic1"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8a95bcc94db5a854e8473c401306bbc82e14e2ae74388a11af9ccf6cd97b0be4"
        />
        <!-- <div class="pic1">

        </div> -->
      </div>
      <div class="section14 flex-col">
        <div
          class="section15-0 flex-col"
          v-for="(item, index) in loopData1"
          :key="index"
        >
          <div class="box1-0 flex-col"></div>
          <div class="box2-0 flex-col">
            <div class="group1-0 flex-row">
              <span class="word8-0" v-html="item.lanhutext0"></span>
              <span class="word9-0" v-html="item.lanhutext1"></span>
            </div>
          </div>
          <div class="box3-0 flex-col">
            <div class="wrap1-0 flex-col">
              <div class="outer11-0 flex-row">
                <span class="info2-0" v-html="item.lanhutext2"></span>
                <span class="info3-0" v-html="item.lanhutext3"></span>
                <div class="mod3-0 flex-col"></div>
                <span class="word10-0" v-html="item.lanhutext4"></span>
              </div>
            </div>
          </div>
          <img
            class="img1-0"
            referrerpolicy="no-referrer"
            :src="item.lanhuimage0"
          />
          <div class="box4-0 flex-col">
            <div class="section16-0 flex-row">
              <span class="word11-0" v-html="item.lanhutext5"></span>
              <span class="word12-0" v-html="item.lanhutext6"></span>
            </div>
          </div>
          <div class="box5-0 flex-col">
            <div class="outer12-0 flex-row">
              <span class="word13-0" v-html="item.lanhutext7"></span>
              <span class="txt9-0" v-html="item.lanhutext8"></span>
            </div>
          </div>
          <div class="box6-0 flex-col">
            <div class="main5-0 flex-row">
              <span class="word14-0" v-html="item.lanhutext9"></span>
              <span class="word15-0" v-html="item.lanhutext10"></span>
            </div>
          </div>
          <div class="box7-0 flex-col">
            <div class="section17-0 flex-row">
              <span class="word16-0" v-html="item.lanhutext11"></span>
              <span
                class="word17-0"
                :style="{ color: item.lanhufontColor12 }"
                v-html="item.lanhutext12"
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhutext0: '投保人',
          lanhutext1: '上官浩然',
          lanhufontColor1: 'rgba(22,38,65,1)'
        },
        {
          lanhutext0: '创建时间',
          lanhutext1: '2019.10.20',
          lanhufontColor1: 'rgba(22,38,65,1)'
        },
        {
          lanhutext0: '催办次数',
          lanhutext1: '0次',
          lanhufontColor1: 'rgba(22,38,65,1)'
        },
        {
          lanhutext0: '时效状态',
          lanhutext1: '已逾期',
          lanhufontColor1: 'rgba(243,60,42,1)'
        }
      ],
      loopData1: [
        {
          lanhutext0: 'Z202007161426430000001',
          lanhutext1: '处理中',
          lanhutext2: '下发原因',
          lanhutext3: '续期问题件',
          lanhutext4: '实收回退',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8a95bcc94db5a854e8473c401306bbc82e14e2ae74388a11af9ccf6cd97b0be4',
          lanhutext5: '投保人',
          lanhutext6: '上官浩然',
          lanhutext7: '创建时间',
          lanhutext8: '2019.10.20',
          lanhutext9: '催办次数',
          lanhutext10: '0次',
          lanhutext11: '时效状态',
          lanhutext12: '逾期风险',
          lanhufontColor12: 'rgba(243,60,42,1)'
        },
        {
          lanhutext0: 'Z202007161426430000001',
          lanhutext1: '处理中',
          lanhutext2: '下发原因',
          lanhutext3: '续期问题件',
          lanhutext4: '实收回退',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8a95bcc94db5a854e8473c401306bbc82e14e2ae74388a11af9ccf6cd97b0be4',
          lanhutext5: '投保人',
          lanhutext6: '上官浩然',
          lanhutext7: '创建时间',
          lanhutext8: '2019.10.20',
          lanhutext9: '催办次数',
          lanhutext10: '0次',
          lanhutext11: '时效状态',
          lanhutext12: '正常',
          lanhufontColor12: 'rgba(22,38,65,1)'
        }
      ],
      constants: {}
    };
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.page {
  z-index: 1;
  position: relative;
  width: 750px;
  height: 1610px;
  background-color: rgba(247, 246, 248, 1);
  overflow: hidden;
  justify-content: flex-start;
  padding-top: 0;
  .bd1 {
    z-index: auto;
    width: 750px;
    height: 1571px;
    .section1 {
      z-index: 203;
      height: 132px;
      background-color: rgba(255, 255, 255, 1);
      width: 750px;
      justify-content: center;
      align-items: center;
      .section2 {
        z-index: auto;
        width: 670px;
        height: 72px;
        justify-content: space-between;
        .outer1 {
          z-index: 206;
          height: 72px;
          border-radius: 6px;
          border: 2px solid rgba(190, 194, 204, 1);
          background-color: rgba(255, 255, 255, 1);
          width: 590px;
          justify-content: center;
          align-items: flex-start;
          padding-left: 20px;
          .layer1 {
            z-index: auto;
            width: 524px;
            height: 44px;
            justify-content: space-between;
            .label1 {
              z-index: 209;
              width: 44px;
              height: 44px;
            }
            .txt1 {
              z-index: 208;
              width: 460px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(190, 194, 204, 1);
              font-size: 28px;
              line-height: 40px;
              margin-top: 2px;
            }
          }
        }
        .outer2 {
          z-index: 214;
          height: 60px;
          margin-top: 6px;
          // width: 60px;
          justify-content: center;
          .txt2 {
            z-index: 215;
            // width: 60px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(22, 38, 65, 1);
            font-size: 28px;
            line-height: 40px;
            text-align: center;
          }
        }
      }
    }
    .section3 {
      z-index: 192;
      height: 78px;
      background-color: rgba(255, 255, 255, 1);
      width: 750px;
      position: relative;
      .section4 {
        z-index: auto;
        width: 750px;
        height: 78px;
        justify-content: space-between;
        .outer3 {
          z-index: 194;
          height: 78px;
          width: 375px;
          justify-content: flex-end;
          .layer2 {
            z-index: auto;
            width: 375px;
            height: 60px;
            .word1 {
              z-index: 196;
              width: 375px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(22, 38, 65, 1);
              font-size: 30px;
              font-family: PingFangSC-Semibold;
              font-weight: 700;
              line-height: 42px;
              text-align: center;
            }
            .mod1 {
              z-index: 195;
              width: 60px;
              height: 4px;
              background-color: rgba(243, 60, 42, 1);
              align-self: center;
              margin-top: 14px;
            }
          }
        }
        .outer4 {
          z-index: 198;
          height: 60px;
          width: 375px;
          justify-content: flex-end;
          .info1 {
            z-index: 199;
            width: 375px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(22, 38, 65, 1);
            font-size: 30px;
            line-height: 42px;
            text-align: center;
          }
        }
      }
      .section5 {
        z-index: 201;
        position: absolute;
        left: 0;
        top: 77px;
        width: 750px;
        height: 1px;
        background-color: rgba(240, 240, 240, 1);
      }
    }
    .section6 {
      z-index: 174;
      height: 92px;
      width: 750px;
      justify-content: flex-end;
      padding-bottom: 20px;
      align-items: center;
      .layer3 {
        z-index: 177;
        height: 40px;
        width: 670px;
        align-items: center;
        .outer5 {
          z-index: auto;
          width: 355px;
          height: 40px;
          justify-content: space-between;
          .outer6 {
            z-index: 180;
            height: 40px;
            // width: 147px;
            align-items: flex-start;
            .main1 {
              z-index: auto;
              // width: 142px;
              height: 40px;
              justify-content: space-between;
              .txt3 {
                z-index: 181;
                // width: 128px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(114, 125, 139, 1);
                font-size: 24px;
                line-height: 40px;
                text-align: left;
              }
              .txt4 {
                z-index: 182;
                // width: 10px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(114, 125, 139, 1);
                font-size: 24px;
                line-height: 40px;
                text-align: left;
              }
            }
          }
          .outer7 {
            z-index: 183;
            width: 30px;
            height: 40px;
            background-color: rgba(216, 216, 216, 0);
          }
          .outer8 {
            z-index: 178;
            width: 1px;
            height: 24px;
            background-color: rgba(190, 194, 204, 1);
            margin-top: 8px;
          }
          .outer9 {
            z-index: 184;
            width: 30px;
            height: 40px;
            background-color: rgba(216, 216, 216, 0);
          }
          .outer10 {
            z-index: 186;
            height: 40px;
            // width: 147px;
            .bd2 {
              z-index: auto;
              // width: 147px;
              height: 40px;
              justify-content: space-between;
              .txt5 {
                z-index: 187;
                // width: 128px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(114, 125, 139, 1);
                font-size: 24px;
                line-height: 40px;
                text-align: left;
              }
              .txt6 {
                z-index: 188;
                // width: 15px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(114, 125, 139, 1);
                font-size: 24px;
                line-height: 40px;
                text-align: left;
              }
            }
          }
        }
      }
    }
    .section7 {
      z-index: 3;
      height: 410px;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
      align-self: center;
      width: 690px;
      justify-content: flex-end;
      padding-bottom: 31px;
      position: relative;
      .section8 {
        z-index: auto;
        width: 690px;
        height: 215px;
        .mod2-0 {
          z-index: 33;
          height: 54px;
          width: 690px;
          justify-content: center;
          align-items: center;
          .main2-0 {
            z-index: auto;
            width: 630px;
            height: 38px;
            justify-content: space-between;
            .word2-0 {
              z-index: 36;
              // width: 172px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: left;
            }
            .word3-0 {
              z-index: 38;
              width: 438px;
              display: block;
              overflow-wrap: break-word;
              font-size: 28px;
              line-height: 38px;
              text-align: right;
            }
          }
        }
      }
      .section9 {
        z-index: 4;
        position: absolute;
        left: 0;
        top: 0;
        width: 690px;
        height: 30px;
      }
      .section10 {
        z-index: 6;
        height: 54px;
        width: 690px;
        justify-content: center;
        align-items: flex-end;
        padding-right: 22px;
        position: absolute;
        left: 0;
        top: 30px;
        .block1 {
          z-index: auto;
          width: 638px;
          height: 39px;
          .txt7 {
            z-index: 11;
            // width: 408px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(22, 38, 65, 1);
            font-size: 32px;
            font-family: PingFangSC-Medium;
            line-height: 38px;
            text-align: left;
          }
          .section11 {
            z-index: 16;
            height: 32px;
            // border-radius: 16px 16px 16px 0;
            // background-color: rgba(243, 60, 42, 1);
            width: 64px;
            justify-content: center;
            align-items: flex-start;
            // padding-left: 13px;
            margin-left: 4px;
            // .label2 {
            //   z-index: 18;
            //   width: 11px;
            //   height: 20px;
            // }
          }
          .word4 {
            z-index: 9;
            // width: 84px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(114, 125, 139, 1);
            font-size: 28px;
            line-height: 38px;
            text-align: right;
            margin: 1px 0 0 78px;
          }
        }
        // .word5 {
        //   z-index: 17;
        //   position: absolute;
        //   left: 470px;
        //   top: 11px;
        //   width: 24px;
        //   display: block;
        //   overflow-wrap: break-word;
        //   color: rgba(255, 255, 255, 1);
        //   font-size: 24px;
        //   line-height: 30px;
        //   text-align: center;
        // }
      }
      .section12 {
        z-index: 21;
        height: 54px;
        width: 690px;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        left: 0;
        top: 84px;
        .main3 {
          z-index: 24;
          height: 38px;
          background-color: rgba(216, 216, 216, 0);
          width: 630px;
          align-items: flex-start;
          .main4 {
            z-index: auto;
            // width: 391px;
            height: 38px;
            .word6 {
              z-index: 26;
              // width: 108px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 26px;
              line-height: 38px;
              text-align: left;
            }
            .word7 {
              z-index: 28;
              // width: 130px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 26px;
              line-height: 38px;
              text-align: left;
              margin-left: 20px;
            }
            .section13 {
              z-index: 31;
              width: 5px;
              height: 5px;
              background-color: rgba(114, 125, 139, 1);
              border-radius: 50%;
              margin: 17px 0 0 10px;
            }
            .txt8 {
              z-index: 30;
              // width: 108px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 26px;
              line-height: 38px;
              text-align: left;
              margin-left: 10px;
            }
          }
        }
      }
      .pic1 {
        z-index: 60;
        position: absolute;
        left: 0;
        top: 144px;
        width: 690px;
        height: 20px;
      }
    }
    .section14 {
      z-index: auto;
      width: 690px;
      height: 839px;
      margin: 20px 0 0 30px;
      .section15-0 {
        z-index: 65;
        position: relative;
        width: 690px;
        height: 410px;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        margin-bottom: 20px;
        .box1-0 {
          z-index: 66;
          position: absolute;
          left: 0;
          top: 0;
          width: 690px;
          height: 30px;
        }
        .box2-0 {
          z-index: 68;
          height: 54px;
          width: 690px;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 30px;
          .group1-0 {
            z-index: auto;
            width: 630px;
            height: 38px;
            justify-content: space-between;
            .word8-0 {
              z-index: 73;
              // width: 408px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(22, 38, 65, 1);
              font-size: 32px;
              font-family: PingFangSC-Medium;
              line-height: 38px;
              text-align: left;
            }
            .word9-0 {
              z-index: 71;
              // width: 84px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: right;
            }
          }
        }
        .box3-0 {
          z-index: 75;
          height: 54px;
          width: 690px;
          justify-content: flex-start;
          align-items: center;
          position: absolute;
          left: 0;
          top: 84px;
          .wrap1-0 {
            z-index: 78;
            height: 38px;
            background-color: rgba(216, 216, 216, 0);
            width: 630px;
            align-items: flex-start;
            .outer11-0 {
              z-index: auto;
              // width: 391px;
              height: 38px;
              .info2-0 {
                z-index: 80;
                // width: 108px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(114, 125, 139, 1);
                font-size: 26px;
                line-height: 38px;
                text-align: left;
              }
              .info3-0 {
                z-index: 82;
                // width: 130px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(114, 125, 139, 1);
                font-size: 26px;
                line-height: 38px;
                text-align: left;
                margin-left: 20px;
              }
              .mod3-0 {
                z-index: 85;
                width: 5px;
                height: 5px;
                background-color: rgba(114, 125, 139, 1);
                border-radius: 50%;
                margin: 17px 0 0 10px;
              }
              .word10-0 {
                z-index: 84;
                // width: 108px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(114, 125, 139, 1);
                font-size: 26px;
                line-height: 38px;
                text-align: left;
                margin-left: 10px;
              }
            }
          }
        }
        .img1-0 {
          z-index: 114;
          position: absolute;
          left: 0;
          top: 144px;
          width: 690px;
          height: 20px;
        }
        .box4-0 {
          z-index: 87;
          height: 54px;
          width: 690px;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 164px;
          .section16-0 {
            z-index: auto;
            width: 630px;
            height: 38px;
            justify-content: space-between;
            .word11-0 {
              z-index: 90;
              // width: 172px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: left;
            }
            .word12-0 {
              z-index: 92;
              width: 438px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(22, 38, 65, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: right;
            }
          }
        }
        .box5-0 {
          z-index: 94;
          height: 54px;
          width: 690px;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 218px;
          .outer12-0 {
            z-index: auto;
            width: 630px;
            height: 38px;
            justify-content: space-between;
            .word13-0 {
              z-index: 97;
              // width: 172px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: left;
            }
            .txt9-0 {
              z-index: 99;
              width: 438px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(22, 38, 65, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: right;
            }
          }
        }
        .box6-0 {
          z-index: 101;
          height: 54px;
          width: 690px;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 272px;
          .main5-0 {
            z-index: auto;
            width: 630px;
            height: 38px;
            justify-content: space-between;
            .word14-0 {
              z-index: 104;
              // width: 172px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: left;
            }
            .word15-0 {
              z-index: 106;
              width: 438px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(22, 38, 65, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: right;
            }
          }
        }
        .box7-0 {
          z-index: 108;
          height: 54px;
          width: 690px;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 326px;
          .section17-0 {
            z-index: auto;
            width: 630px;
            height: 38px;
            justify-content: space-between;
            .word16-0 {
              z-index: 111;
              // width: 172px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 28px;
              line-height: 38px;
              text-align: left;
            }
            .word17-0 {
              z-index: 113;
              width: 438px;
              display: block;
              overflow-wrap: break-word;
              font-size: 28px;
              line-height: 38px;
              text-align: right;
            }
          }
        }
      }
    }
  }
}

</style>
